<template>
  <div>
    <search btn-text="添加影厅" @searchHall="searchHall"></search>
    <table-info
      type="hall"
      :tableList="tableList"
      @deleteHall="deleteHall"
      :headList="headList"
      @edit="edit"
    ></table-info>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="8"
      @current-change="change"
    />
    <dia-log @update="update"></dia-log>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import DiaLog from './components/dialog.vue'
import { getCurrentPageHall, deleteHall, addHallInfo, updateHallInfo } from '@/api/hall'
export default {
  components: { DiaLog },
  data () {
    return {
      headList: [
        { id: 1, label: '影院ID', prop: 'cinema_id' },
        { id: 2, label: '影院名', prop: 'cinema_name' },
        { id: 3, label: '影院电话', prop: 'cinema_phone' },
        { id: 4, label: '影厅名', prop: 'name' }
      ],
      tableList: [],
      currentPage: 1,
      pageSize: 8,
      input: '',
      total: 0,
      newRuleForm: { // 为更新信息的传递值
        hallId: '',
        cinemaId: '',
        hallOldName: '',
        hallNewName: ''
      }
    }
  },
  created () {
    this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
  },
  computed: {
    ...mapState('hall', ['ruleForm'])
  },
  methods: {
    ...mapActions('hall', ['changeRuleForm']),
    // 初始化
    async getCurrentPageHall (currentPage, pageSize, input) {
      const res = await getCurrentPageHall({ currentPage, pageSize, input })
      if (res.success_code === 200) {
        this.tableList = res.data
        this.total = res.total
      }
    },
    // 切换页码
    change (page) {
      this.currentPage = page
      this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
    },
    // 搜索
    searchHall (val) {
      this.input = val
      this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
    },
    // 删除
    async deleteHall (val) {
      if ((this.total - 1) % this.pageSize === 0 && this.currentPage > 1) {
        this.currentPage -= 1
      }
      const delObj = {
        cinemaId: val.cinema_id,
        hallName: val.name
      }
      const res = await deleteHall(delObj)
      if (res.success_code === 200) {
        this.$message.success('删除成功')
        this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
      } else {
        this.$message.error(res.message)
      }
    },
    // 添加
    async add () {
      const res = await addHallInfo(this.ruleForm)
      if (res.success_code === 200) {
        this.$message.success('添加成功')
        this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
      } else {
        this.$message.error(res.message)
      }
    },
    // 编辑
    async edit (val) {
      const formObj = {
        cinemaId: val.cinema_name,
        hallName: val.name
      }
      await this.changeRuleForm(formObj) // 修改弹框form表单
      this.newRuleForm.hallId = val.hall_id
      this.newRuleForm.cinemaId = val.cinema_id
      this.newRuleForm.hallOldName = val.name
    },
    async update () {
      this.newRuleForm.hallNewName = this.ruleForm.hallName // 新值给予到更新参数
      const res = await updateHallInfo(this.newRuleForm) // 更新
      if (res.success_code === 200) {
        this.$message.success('更新成功')
        this.getCurrentPageHall(this.currentPage, this.pageSize, this.input)
        const obj = {
          cinemaId: '',
          hallName: ''
        }
        this.changeRuleForm(obj)
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style>
</style>
